<template>
    <div class="mod-datasource">
      <div style="background: #fff; width: 100%; padding: 15px 15px 0 15px">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="small">
          <el-form-item label="订单号:">
            <el-input v-model.trim="dataForm.orderNo" placeholder="订单号" clearable class="inputWidth" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="日期:">
            <el-date-picker
                    v-model="date"
                    class="inputWidth"
                    type="daterange" :default-time="['00:00:00','23:59:59']"
                    value-format="yyyy-MM-dd"
                    clearable
                    start-placeholder="选择日期"
                    end-placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="类型:">
            <el-select v-model="dataForm.orderType" placeholder="全部" clearable>
              <el-option label="下单" value="1"></el-option>
              <el-option label="退单" value="2"></el-option>
              <el-option label="提现" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收支:">
            <el-select v-model="dataForm.payType" placeholder="全部" clearable>
              <el-option label="收入" value="1"></el-option>
              <el-option label="支出" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm()" size="small">重置</el-button>
            <el-button @click="getDataList()" type="primary" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style=" background: #fff; width: 100%; height: 40px; margin-top: 10px; padding-left: 20px">
    </div>
      <el-table
              v-loading="dataListLoading"
              :header-cell-style="{background: '#DBEDF6'}"
              :data="dataList"
              :height="tableHeight">
        <!--        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <!--        <el-table-column prop="flowCode" label="流水ID" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="orderNo" label="订单号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="flowType" label="类型" header-align="center" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.orderType === 1 ? '下单' : scope.row.orderType === 2 ?  '退单' : scope.row.orderType === 3 ? '提现 ' : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payType" label="收支" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.payType === 1 ? '收入' : '支出' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tradeTime" label="日期" header-align="center" align="center"></el-table-column>
        <el-table-column prop="tradeAmount" label="金额" header-align="center" align="center"></el-table-column>
        <!--        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-button type="text" size="small" @click="datasourceHandle(scope.row.id)">查看详情</el-button>-->
        <!--            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">查看行程</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <el-pagination
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/finance/finance/getPhysicalFinanceMemberFlowList',
        getDataListIsPage: true,
        deleteURL: '/devtools/datasource',
        deleteIsBatch: true
      },
      dataForm: {
        connName: '',
        dbType: ''
      },
      tableHeight: null,
      date: []
    }
  },
  watch: {
    date (newVal, oldVal) {
      if (newVal == null) {
        this.dataForm.beginTradeTime = null
        this.dataForm.endTradeTime = null
      } else {
        this.dataForm.beginTradeTime = newVal[0]
        this.dataForm.endTradeTime = newVal[1]
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement.clientHeight - 310
    })
  },
  methods: {
    datasourceHandle: function (id) {
      // this.$http.get('/devtools/datasource/test/' + id).then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   } else {
      //     return this.$message.success(res.data)
      //   }
      // }).catch(() => {})
    },
    resetForm () {
      for (const key in this.dataForm) {
        this.dataForm[key] = null
      }
      this.date = null
    }
  }
}
</script>
<style>
</style>
